<template>
  <view class="chat-container">
    <view class="" style="width: 100%; height: 200px"></view>
    <view class="content" @touchstart="hideDrawer">
      <scroll-view
        class="msg-list"
        :style="{ bottom: 124 + safeBottom + 'rpx' }"
        scroll-y="true"
        :scroll-with-animation="scrollAnimation"
        :scroll-top="scrollTop"
        :scroll-into-view="scrollToView"
        @scrolltoupper="loadHistory"
        upper-threshold="50"
      >
        <!-- 加载历史数据waitingUI -->
        <view class="loading" v-if="!last">
          <view class="spinner">
            <view class="rect1"></view>
            <view class="rect2"></view>
            <view class="rect3"></view>
            <view class="rect4"></view>
            <view class="rect5"></view>
          </view>
        </view>
        <view style="width: 100%; height: 1px"></view>
        <view class="row" v-for="(row, index) in msgList" :key="index" :id="'msg' + row.msg.id">
          <!-- 系统消息 -->
          <block v-if="row.type == 'system'">
            <view class="system">
              <!-- 文字消息 -->
              <view v-if="row.msg.type == 'text'" class="text">
                {{ row.msg.content.text }}
              </view>
              <!-- 领取红包消息 -->
              <view v-if="row.msg.type == 'redEnvelope'" class="red-envelope">
                <image src=""></image>
                {{ row.msg.content.text }}
              </view>
            </view>
          </block>
          <!-- 用户消息 -->
          <block v-if="row.type == 'user'">
            <!-- 自己发出的消息 -->
            <view class="my" v-if="row.msg.uid == myUid">
              <!-- 左-消息 -->
              <view class="left">
                <!-- 文字消息 -->
                <view v-if="row.msg.type == 'text'" class="bubble">
                  <rich-text :nodes="row.msg.content.text"></rich-text>
                </view>
                <!-- 语言消息 -->
                <view
                  v-if="row.msg.type == 'voice'"
                  class="bubble voice"
                  @tap="playVoice(row.msg)"
                  :class="playMsgid == row.msg.id ? 'play' : ''"
                >
                  <view class="length">{{ row.msg.content.length }}</view>
                  <view class="icon my-voice"></view>
                </view>
                <!-- 图片消息 -->
                <view v-if="row.msg.type == 'img'" class="bubble img" @tap="showPic(row.msg)">
                  <image
                    :src="row.msg.content.url"
                    :style="{ width: row.msg.content.w + 'px', height: row.msg.content.h + 'px' }"
                  ></image>
                </view>
                <!-- 红包 -->
                <view
                  v-if="row.msg.type == 'redEnvelope'"
                  class="bubble red-envelope"
                  @tap="openRedEnvelope(row.msg, index)"
                >
                  <image src=""></image>
                  <view class="tis">
                    <!-- 点击开红包 -->
                  </view>
                  <view class="blessing">
                    {{ row.msg.content.blessing }}
                  </view>
                </view>
              </view>
              <!-- 右-头像 -->
              <view class="right">
                <image class="avatar" :src="fromUserData.avatar" mode="aspectFill"></image>
              </view>
            </view>
            <!-- 别人发出的消息 -->
            <view class="other" v-if="row.msg.uid != myUid">
              <!-- 左-头像 -->
              <view class="left">
                <image :src="toUserData.avatar" mode="aspectFill"></image>
              </view>
              <!-- 右-用户名称-时间-消息 -->
              <view class="right">
                <view class="username">
                  <view class="name">{{ toUserData.nickname }}</view>
                  <!-- <view class="time">{{ row.msg.time }}</view> -->
                </view>
                <!-- 文字消息 -->
                <view v-if="row.msg.type == 'text'" class="bubble">
                  <rich-text :nodes="row.msg.content.text"></rich-text>
                </view>
                <!-- 语音消息 -->
                <view
                  v-if="row.msg.type == 'voice'"
                  class="bubble voice"
                  @tap="playVoice(row.msg)"
                  :class="playMsgid == row.msg.id ? 'play' : ''"
                >
                  <view class="icon other-voice"></view>
                  <view class="length">{{ row.msg.content.length }}</view>
                </view>
                <!-- 图片消息 -->
                <view v-if="row.msg.type == 'img'" class="bubble img" @tap="showPic(row.msg)">
                  <image
                    :src="row.msg.content.url"
                    :style="{ width: row.msg.content.w + 'px', height: row.msg.content.h + 'px' }"
                  ></image>
                </view>
                <!-- 红包 -->
                <view
                  v-if="row.msg.type == 'redEnvelope'"
                  class="bubble red-envelope"
                  @tap="openRedEnvelope(row.msg, index)"
                >
                  <image src=""></image>
                  <view class="tis">
                    <!-- 点击开红包 -->
                  </view>
                  <view class="blessing">
                    {{ row.msg.content.blessing }}
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
    <!-- 抽屉栏 -->
    <view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
      <!-- 表情 -->
      <swiper
        class="emoji-swiper"
        :class="{ hidden: hideEmoji }"
        indicator-dots="true"
        duration="150"
      >
        <swiper-item v-for="(page, pid) in emojiList" :key="pid">
          <view v-for="(em, eid) in page" :key="eid" @tap="addEmoji(em)">
            <!-- <image mode="widthFix" :src="'/static/img/emoji/'+em.url"></image> -->
          </view>
        </swiper-item>
      </swiper>
      <!-- 更多功能 相册-拍照-红包 -->
      <view class="more-layer" :class="{ hidden: hideMore }">
        <view class="list">
          <view class="box" @tap="chooseImage"><view class="icon tupian2"></view></view>
          <!-- <view class="box" @tap="camera"><view class="icon paizhao"></view></view>
					<view class="box" @tap="handRedEnvelopes"><view class="icon hongbao"></view></view> -->
        </view>
      </view>
    </view>
    <!-- 底部输入栏 -->
    <view
      class="input-box"
      :class="popupLayerClass"
      @touchmove.stop.prevent="discard"
      :style="{ paddingBottom: safeBottom + 24 + 'rpx' }"
    >
      <!-- H5下不能录音，输入栏布局改动一下 -->
      <!-- #ifndef H5 -->
      <!-- <view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view> -->
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <!-- <view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view> -->
      <!-- #endif -->
      <view class="textbox">
        <view
          class="voice-mode"
          :class="[isVoice ? '' : 'hidden', recording ? 'recording' : '']"
          @touchstart="voiceBegin"
          @touchmove.stop.prevent="voiceIng"
          @touchend="voiceEnd"
          @touchcancel="voiceCancel"
        >
          {{ voiceTis }}
        </view>
        <view class="text-mode" :class="isVoice ? 'hidden' : ''">
          <view class="box">
            <textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" />
          </view>
          <view style="width: 20rpx; height: 1px"></view>
          <!-- <view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view> -->
        </view>
      </view>
      <view style="width: 24rpx;height: 70rpx;"></view>
      <!-- <view class="more" @tap="showMore">
        <view class="icon add"></view>
      </view> -->
      <!-- #ifndef H5 -->
      <!-- <view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view> -->
      <!-- #endif -->
      <view class="send" :class="isVoice ? 'hidden' : ''" @tap="sendText">
        <view class="btn">发送</view>
      </view>
    </view>
    <!-- 录音UI效果 -->
    <view class="record" :class="recording ? '' : 'hidden'">
      <view class="ing" :class="willStop ? 'hidden' : ''"><view class="icon luyin2"></view></view>
      <view class="cancel" :class="willStop ? '' : 'hidden'">
        <view class="icon chehui"></view>
      </view>
      <view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
    </view>
    <!-- 红包弹窗 -->
    <view class="windows" :class="windowsState">
      <!-- 遮罩层 -->
      <view class="mask" @touchmove.stop.prevent="discard" @tap="closeRedEnvelope"></view>
      <view class="layer" @touchmove.stop.prevent="discard">
        <view class="open-redenvelope">
          <view class="top">
            <view class="close-btn">
              <view class="icon close" @tap="closeRedEnvelope"></view>
            </view>
            <image src=""></image>
          </view>
          <view class="from">来自{{ redenvelopeData.from }}</view>
          <view class="blessing">{{ redenvelopeData.blessing }}</view>
          <view class="money">{{ redenvelopeData.money }}</view>
          <view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
            查看领取详情
            <view class="icon to"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    fromUserData: {
      type: Object,
      default: () => ({}),
    },
    toUserData: {
      type: Object,
      default: () => ({}),
    },
    handleSendMessage: {
      type: Function,
      default: () => {},
    },
    getLocalImChatList: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      safeBottom: 0,

      last: false,
      //文字消息
      isHistoryLoading: false,
      textMsg: '',
      //消息列表
      scrollAnimation: false,
      scrollTop: 0,
      scrollToView: '',
      msgList: [],
      msgImgList: [],
      myUid: 0,

      //录音相关参数
      // #ifndef H5
      //H5不能录音
      RECORDER: uni.getRecorderManager(),
      // #endif
      isVoice: false,
      voiceTis: '按住 说话',
      recordTis: '手指上滑 取消发送',
      recording: false,
      willStop: false,
      initPoint: { identifier: 0, Y: 0 },
      recordTimer: null,
      recordLength: 0,

      //播放语音相关参数
      AUDIO: uni.createInnerAudioContext(),
      playMsgid: null,
      VoiceTimer: null,
      // 抽屉参数
      popupLayerClass: '',
      // more参数
      hideMore: true,
      //表情定义
      hideEmoji: true,
      emojiList: [
        // [{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
        // [{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
        // [{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
        // [{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
        // [{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
      ],
      //表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
      onlineEmoji: {
        // "100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif","104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif","108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif","112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif","116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif","121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif","127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif","131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif","135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif","139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif","143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif","147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif","151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif","155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif","159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif","163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif","167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif","171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif","175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif","179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif","183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif","187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif","191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif","195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif","199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png","203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png","207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png","211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png","217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"
      },
      //红包相关参数
      windowsState: '',
      redenvelopeData: {
        rid: null, //红包ID
        from: null,
        face: null,
        blessing: null,
        money: null,
      },
    }
  },
  created() {
    const { safeAreaInsets } = uni.getSystemInfoSync()
    this.safeBottom = safeAreaInsets.bottom

  },
  mounted() {
    // this.getMsgList()
    //语音自然播放结束
    this.AUDIO.onEnded((res) => {
      this.playMsgid = null
    })
    // #ifndef H5
    //录音开始事件
    this.RECORDER.onStart((e) => {
      this.recordBegin(e)
    })
    //录音结束事件
    this.RECORDER.onStop((e) => {
      this.recordEnd(e)
    })
    // #endif
  },
  onShow() {
    this.scrollTop = 9999999

    //模板借由本地缓存实现发红包效果，实际应用中请不要使用此方法。
    //
    // uni.getStorage({
    // 	key: 'redEnvelopeData',
    // 	success:  (res)=>{
    // 		console.log(res.data);
    // 		let nowDate = new Date();
    // 		let lastId = this.msgList[this.msgList.length-1].msg.id;
    // 		lastId++;
    // 		let row = {type:"user",msg:{id:lastId,type:"redEnvelope",time:nowDate.getHours()+":"+nowDate.getMinutes(),userInfo:{uid:0,username:"大黑哥",face:""},content:{blessing:res.data.blessing,rid:Math.floor(Math.random()*1000+1),isReceived:false}}};
    // 		this.screenMsg(row);
    // 		uni.removeStorage({key: 'redEnvelopeData'});
    // 	}
    // });
  },
  methods: {
    // 第一次加载历史列表
    firstGetMsgList() {
      this.isHistoryLoading = true;
      this.getLocalImChatList({
        /** 发送人id */
        userId: this.fromUserData.id,
        /** 接收人id */
        toUserId: this.toUserData.id,
      }, (res) => {
        this.isHistoryLoading = false;
        const _list = this.getInitList(res);
        this.getMsgList(_list);
      })
    },
    // 设置自己的uid
    setMyUid(uid) {
      this.myUid = uid;
      this.firstGetMsgList();
    },
    // 接受消息(筛选处理)
    screenMsg(msg) {
      //从长连接处转发给这个方法，进行筛选处理
      if (msg.type == 'system') {
        // 系统消息
        switch (msg.msg.type) {
          case 'text':
            this.addSystemTextMsg(msg)
            break
          case 'redEnvelope':
            this.addSystemRedEnvelopeMsg(msg)
            break
        }
      } else if (msg.type == 'user') {
        // 用户消息
        switch (msg.msg.type) {
          case 'text':
            this.addTextMsg(msg)
            break
          case 'voice':
            this.addVoiceMsg(msg)
            break
          case 'img':
            this.addImgMsg(msg)
            break
          case 'redEnvelope':
            this.addRedEnvelopeMsg(msg)
            break
        }
        //非自己的消息震动
        // if(msg.msg.userInfo.uid!=this.myUid){
        // 	console.log('振动');
        // 	uni.vibrateLong();
        // }
      }
      this.$nextTick(function () {
        // 滚动到底
        this.scrollToView = 'msg' + msg.msg.id
      })
    },

    //触发滑动到顶部(加载历史信息记录)
    loadHistory(e) {
      if (this.isHistoryLoading || this.last) {
        return
      }
      this.scrollAnimation = false //关闭滑动动画
      let viewId = this.msgList[0].msg.id //记住第一个信息ID
      let vid = this.msgList[0].msg.vid //记住第一个信息游标

      this.isHistoryLoading = true //参数作为进入请求标识，防止重复请求
      this.getLocalImChatList({
        /** 发送人id */
        userId: this.fromUserData.id,
        /** 接收人id */
        toUserId: this.toUserData.id,
        /** 游标 */
        id: vid,
      }, (res) => {
        this.isHistoryLoading = false;
        const list = this.getInitList(res);
        for (let i = 0; i < list.length; i++) {
          if (list[i].type == 'user' && list[i].msg.type == 'img') {
            list[i].msg.content = this.setPicSize(list[i].msg.content)
            this.msgImgList.unshift(list[i].msg.content.url)
          }
          list[i].msg.id = Math.floor(Math.random() * 1000 + 1)
          this.msgList.unshift(list[i])
        }
        //这段代码很重要，不然每次加载历史数据都会跳到顶部
        this.$nextTick(function () {
          this.scrollToView = 'msg' + viewId //跳转上次的第一行信息位置
          this.$nextTick(function () {
            this.scrollAnimation = true //恢复滚动动画
          })
        })
      })

      //本地模拟请求历史记录效果
      // setTimeout(() => {
      //   // 消息列表
      //   let list = [
      //     // {
      //     //   type: 'user',
      //     //   msg: {
      //     //     id: 1,
      //     //     type: 'text',
      //     //     time: '12:56',
      //     //     userInfo: { uid: 0, username: '大黑哥', face: '' },
      //     //     content: { text: '为什么温度会相差那么大？' },
      //     //   },
      //     // },
      //     // {
      //     //   type: 'user',
      //     //   msg: {
      //     //     id: 2,
      //     //     type: 'text',
      //     //     time: '12:57',
      //     //     userInfo: { uid: 1, username: '售后客服008', face: '' },
      //     //     content: {
      //     //       text: '这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。',
      //     //     },
      //     //   },
      //     // },
      //     // {
      //     //   type: 'user',
      //     //   msg: {
      //     //     id: 3,
      //     //     type: 'voice',
      //     //     time: '12:59',
      //     //     userInfo: { uid: 1, username: '售后客服008', face: '' },
      //     //     content: { url: '', length: '00:06' },
      //     //   },
      //     // },
      //     // {
      //     //   type: 'user',
      //     //   msg: {
      //     //     id: 4,
      //     //     type: 'voice',
      //     //     time: '13:05',
      //     //     userInfo: { uid: 0, username: '大黑哥', face: '' },
      //     //     content: { url: '', length: '00:06' },
      //     //   },
      //     // },
      //   ]
      //   // 获取消息中的图片,并处理显示尺寸
      //   for (let i = 0; i < list.length; i++) {
      //     if (list[i].type == 'user' && list[i].msg.type == 'img') {
      //       list[i].msg.content = this.setPicSize(list[i].msg.content)
      //       this.msgImgList.unshift(list[i].msg.content.url)
      //     }
      //     list[i].msg.id = Math.floor(Math.random() * 1000 + 1)
      //     this.msgList.unshift(list[i])
      //   }

      //   //这段代码很重要，不然每次加载历史数据都会跳到顶部
      //   this.$nextTick(function () {
      //     this.scrollToView = 'msg' + viewId //跳转上次的第一行信息位置
      //     this.$nextTick(function () {
      //       this.scrollAnimation = true //恢复滚动动画
      //     })
      //   })
      //   // this.isHistoryLoading = false
      // }, 1000)
    },
    getInitList(res) {
      const list = res.data.historyList || [];
      if (list.length < 20) {
        this.last = true;
      }
      return list.map((item, index) => {
        const message_content = item.message_content.indexOf(`"`) !== -1 ? JSON.parse(item.message_content) : item.message_content;
        return {
          type:'user',
          msg: {
            id: +new Date() + index,
            time: +new Date() + index,
            type: 'text',
            content: { text: message_content },
            uid: item.channel_id,
            vid: item.message_seq
          }
        }
      })
    },
    // 加载初始页面消息
    getMsgList(list = []) {
      // 消息列表
      // let list = [
      //   {type:"system",msg:{id:0,type:"text",content:{text:"欢迎进入HM-chat聊天室"}}},
      //   {type:"user",msg:{id:1,type:"text",time:"12:56",userInfo:{uid:0,username:"大黑哥",face:""},content:{text:"为什么温度会相差那么大？"}}},
      //   {type:"user",msg:{id:2,type:"text",time:"12:57",userInfo:{uid:1,username:"售后客服008",face:""},content:{text:"这个是有偏差的，两个温度相差十几二十度是很正常的，如果相差五十度，那即是质量问题了。"}}},
      //   {type:"user",msg:{id:3,type:"voice",time:"12:59",userInfo:{uid:1,username:"售后客服008",face:""},content:{url:"",length:"00:06"}}},
      //   {type:"user",msg:{id:4,type:"voice",time:"13:05",userInfo:{uid:0,username:"大黑哥",face:""},content:{url:"",length:"00:06"}}},
      //   {type:"user",msg:{id:5,type:"img",time:"13:05",userInfo:{uid:0,username:"大黑哥",face:""},content:{url:"",w:200,h:200}}},
      //   {type:"user",msg:{id:6,type:"img",time:"12:59",userInfo:{uid:1,username:"售后客服008",face:""},content:{url:"",w:1920,h:1080}}},
      //   {type:"system",msg:{id:7,type:"text",content:{text:"欢迎进入HM-chat聊天室"}}},
      //   {type:"system",msg:{id:9,type:"redEnvelope",content:{text:"售后客服008领取了你的红包"}}},
      //   {type:"user",msg:{id:10,type:"redEnvelope",time:"12:56",userInfo:{uid:0,username:"大黑哥",face:""},content:{blessing:"恭喜发财，大吉大利，万事如意",rid:0,isReceived:false}}},
      //   {type:"user",msg:{id:11,type:"redEnvelope",time:"12:56",userInfo:{uid:1,username:"售后客服008",face:""},content:{blessing:"恭喜发财",rid:1,isReceived:false}}},
      // ]
      // 获取消息中的图片,并处理显示尺寸
      // for (let i = 0; i < list.length; i++) {
      //   if (list[i].type == 'user' && list[i].msg.type == 'img') {
      //     list[i].msg.content = this.setPicSize(list[i].msg.content)
      //     this.msgImgList.push(list[i].msg.content.url)
      //   }
      // }
      this.msgList = list.sort((a, b) => {
        return a.msg.vid - b.msg.vid
      });
      // 滚动到底部
      this.$nextTick(function () {
        //进入页面滚动到底部
        this.scrollTop = 9999
        this.$nextTick(function () {
          this.scrollAnimation = true
        })
      })
    },
    //处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
    setPicSize(content) {
      // 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
      let maxW = uni.upx2px(350) //350是定义消息图片最大宽度
      let maxH = uni.upx2px(350) //350是定义消息图片最大高度
      if (content.w > maxW || content.h > maxH) {
        let scale = content.w / content.h
        content.w = scale > 1 ? maxW : maxH * scale
        content.h = scale > 1 ? maxW / scale : maxH
      }
      return content
    },

    //更多功能(点击+弹出)
    showMore() {
      this.isVoice = false
      this.hideEmoji = true
      if (this.hideMore) {
        this.hideMore = false
        this.openDrawer()
      } else {
        this.hideDrawer()
      }
    },
    // 打开抽屉
    openDrawer() {
      this.popupLayerClass = 'showLayer'
    },
    // 隐藏抽屉
    hideDrawer() {
      this.popupLayerClass = ''
      setTimeout(() => {
        this.hideMore = true
        this.hideEmoji = true
      }, 150)
    },
    // 选择图片发送
    chooseImage() {
      this.getImage('album')
    },
    //拍照发送
    camera() {
      this.getImage('camera')
    },
    //发红包
    handRedEnvelopes() {
      // uni.navigateTo({
      // 	url:'HM-hand/HM-hand'
      // });
      // this.hideDrawer();
    },
    //选照片 or 拍照
    getImage(type) {
      this.hideDrawer()
      uni.chooseImage({
        sourceType: [type],
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            uni.getImageInfo({
              src: res.tempFilePaths[i],
              success: (image) => {
                console.log(image.width)
                console.log(image.height)
                let msg = { url: res.tempFilePaths[i], w: image.width, h: image.height }
                this.sendMsg(msg, 'img')
              },
            })
          }
        },
      })
    },
    // 选择表情
    chooseEmoji() {
      this.hideMore = true
      if (this.hideEmoji) {
        this.hideEmoji = false
        this.openDrawer()
      } else {
        this.hideDrawer()
      }
    },
    //添加表情
    addEmoji(em) {
      this.textMsg += em.alt
    },

    //获取焦点，如果不是选表情ing,则关闭抽屉
    textareaFocus() {
      if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
        this.hideDrawer()
      }
    },
    // 发送文字消息
    sendText() {
      this.hideDrawer() //隐藏抽屉
      if (!this.textMsg) {
        return
      }
      // let content = this.replaceEmoji(this.textMsg);
      let content = this.textMsg

      this.handleSendMessage &&
        this.handleSendMessage(
          {
            fromUser: this.fromUserData.id,
            toUser: this.toUserData.id,
            message: JSON.stringify(content),
          },
          () => {
            let msg = { text: content }
            this.sendMsg(msg, 'text')
            this.textMsg = '' //清空输入框
          },
        )
    },
    //替换表情符号为图片
    replaceEmoji(str) {
      let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
        console.log('item: ' + item)
        for (let i = 0; i < this.emojiList.length; i++) {
          let row = this.emojiList[i]
          for (let j = 0; j < row.length; j++) {
            let EM = row[j]
            if (EM.alt == item) {
              //在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
              //比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
              let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
              let imgstr = '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">'
              console.log('imgstr: ' + imgstr)
              return imgstr
            }
          }
        }
      })
      return (
        '<div style="display: flex;align-items: center;word-wrap:break-word;">' +
        replacedStr +
        '</div>'
      )
    },

    sendMessage(options) {
      console.log('options----', options)
      // 发送消息
      this.screenMsg(options)
    },
    // 发送消息
    sendMsg(content, type) {
      //实际应用中，此处应该提交长连接，模板仅做本地处理。
      const lastItem = this.msgList[this.msgList.length - 1] || {}
      const _msg = lastItem.msg || {}
      let lastId = _msg.id
      lastId++
      let msg = {
        type: 'user',
        msg: {
          id: lastId,
          time: +new Date(),
          type: type,
          content,
          uid: this.myUid,
        },
      }
      // 发送消息
      this.screenMsg(msg)
      // // 定时器模拟对方回复,三秒
      // setTimeout(()=>{
      // 	lastId = this.msgList[this.msgList.length-1].msg.id;
      // 	lastId++;
      // 	msg = {type:'user',msg:{id:lastId,time:nowDate.getHours()+":"+nowDate.getMinutes(),type:type,userInfo:{uid:1,username:"售后客服008",face:""},content:content}}
      // 	// 本地模拟发送消息
      // 	this.screenMsg(msg);
      // },3000)
    },

    // 添加文字消息到列表
    addTextMsg(msg) {
      this.msgList.push(msg)
    },
    // 添加语音消息到列表
    addVoiceMsg(msg) {
      this.msgList.push(msg)
    },
    // 添加图片消息到列表
    addImgMsg(msg) {
      msg.msg.content = this.setPicSize(msg.msg.content)
      this.msgImgList.push(msg.msg.content.url)
      this.msgList.push(msg)
    },
    addRedEnvelopeMsg(msg) {
      this.msgList.push(msg)
    },
    // 添加系统文字消息到列表
    addSystemTextMsg(msg) {
      this.msgList.push(msg)
    },
    // 添加系统红包消息到列表
    addSystemRedEnvelopeMsg(msg) {
      this.msgList.push(msg)
    },
    // 打开红包
    openRedEnvelope(msg, index) {
      let rid = msg.content.rid
      uni.showLoading({
        title: '加载中...',
      })
      console.log('index: ' + index)
      //模拟请求服务器效果
      setTimeout(() => {
        //加载数据
        if (rid == 0) {
          this.redenvelopeData = {
            rid: 0, //红包ID
            from: '大黑哥',
            face: '',
            blessing: '恭喜发财，大吉大利',
            money: '已领完',
          }
        } else {
          this.redenvelopeData = {
            rid: 1, //红包ID
            from: '售后客服008',
            face: '',
            blessing: '恭喜发财',
            money: '0.01',
          }
          if (!msg.content.isReceived) {
            // {type:"system",msg:{id:8,type:"redEnvelope",content:{text:"你领取了售后客服008的红包"}}},
            this.sendSystemMsg(
              {
                text:
                  '你领取了' +
                  (msg.uid == this.myUid ? '自己' : msg.username) +
                  '的红包',
              },
              'redEnvelope',
            )
            console.log('this.msgList[index]: ' + JSON.stringify(this.msgList[index]))
            this.msgList[index].msg.content.isReceived = true
          }
        }
        uni.hideLoading()
        this.windowsState = 'show'
      }, 200)
    },
    // 关闭红包弹窗
    closeRedEnvelope() {
      this.windowsState = 'hide'
      setTimeout(() => {
        this.windowsState = ''
      }, 200)
    },
    sendSystemMsg(content, type) {
      let lastId = this.msgList[this.msgList.length - 1].msg.id
      lastId++
      let row = { type: 'system', msg: { id: lastId, type: type, content: content } }
      this.screenMsg(row)
    },
    //领取详情
    toDetails(rid) {
      // uni.navigateTo({
      // 	url:'HM-details/HM-details?rid='+rid
      // })
    },
    // 预览图片
    showPic(msg) {
      uni.previewImage({
        indicator: 'none',
        current: msg.content.url,
        urls: this.msgImgList,
      })
    },
    // 播放语音
    playVoice(msg) {
      this.playMsgid = msg.id
      this.AUDIO.src = msg.content.url
      this.$nextTick(function () {
        this.AUDIO.play()
      })
    },
    // 录音开始
    voiceBegin(e) {
      if (e.touches.length > 1) {
        return
      }
      this.initPoint.Y = e.touches[0].clientY
      this.initPoint.identifier = e.touches[0].identifier
      this.RECORDER.start({ format: 'mp3' }) //录音开始,
    },
    //录音开始UI效果
    recordBegin(e) {
      this.recording = true
      this.voiceTis = '松开 结束'
      this.recordLength = 0
      this.recordTimer = setInterval(() => {
        this.recordLength++
      }, 1000)
    },
    // 录音被打断
    voiceCancel() {
      this.recording = false
      this.voiceTis = '按住 说话'
      this.recordTis = '手指上滑 取消发送'
      this.willStop = true //不发送录音
      this.RECORDER.stop() //录音结束
    },
    // 录音中(判断是否触发上滑取消发送)
    voiceIng(e) {
      if (!this.recording) {
        return
      }
      let touche = e.touches[0]
      //上滑一个导航栏的高度触发上滑取消发送
      if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
        this.willStop = true
        this.recordTis = '松开手指 取消发送'
      } else {
        this.willStop = false
        this.recordTis = '手指上滑 取消发送'
      }
    },
    // 结束录音
    voiceEnd(e) {
      if (!this.recording) {
        return
      }
      this.recording = false
      this.voiceTis = '按住 说话'
      this.recordTis = '手指上滑 取消发送'
      this.RECORDER.stop() //录音结束
    },
    //录音结束(回调文件)
    recordEnd(e) {
      clearInterval(this.recordTimer)
      if (!this.willStop) {
        console.log('e: ' + JSON.stringify(e))
        let msg = {
          length: 0,
          url: e.tempFilePath,
        }
        let min = parseInt(this.recordLength / 60)
        let sec = this.recordLength % 60
        min = min < 10 ? '0' + min : min
        sec = sec < 10 ? '0' + sec : sec
        msg.length = min + ':' + sec
        this.sendMsg(msg, 'voice')
      } else {
        console.log('取消发送录音')
      }
      this.willStop = false
    },
    // 切换语音/文字输入
    switchVoice() {
      this.hideDrawer()
      this.isVoice = this.isVoice ? false : true
    },
    discard() {
      return
    },
  },
}
</script>
<style lang="scss" scoped>
@import './css/style.scss';

.chat-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #ededed;
}

.my {
  margin: 0;
}
</style>
